<template>
	<div id="order" class="container">
		<!-- <div class="search">
      <el-form ref="searchForm" :model="searchForm" inline label-width="90px">
        <el-form-item label="内链名称：" prop="title">
          <el-input v-model="searchForm.title" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search(searchForm)">查询</el-button>
          <el-button @click="reset(searchForm)">重置</el-button>
        </el-form-item>
      </el-form>
    </div> -->
		<h3 class="title"><span />询盘列表</h3>
		<el-button
			type="primary"
			class="add"
			size="small"
			icon="el-icon-plus"
			style="margin-bottom: 15px"
			@click="goAdd"
			>添加</el-button
		>
		<BouncedDialog
			:title="addForm.id ? '编辑' : '添加'"
			:dialog-show.sync="dialogShow"
			width="80%"
			class="link"
		>
			<el-form
				ref="addForm"
				:model="addForm"
				:rules="rules"
				inline
				class="addForm"
				label-width="80px"
			>
				<el-row :gutter="24">
					<el-col :span="12">
						<el-form-item label="询盘类型" prop="inquiry_type">
							<el-select v-model="addForm.inquiry_type">
								<el-option
									v-for="item in inquiryCate"
									:key="item.id"
									:label="item.name"
									:value="item.id"
								/>
							</el-select>
						</el-form-item>
						<el-form-item label="询盘内容" prop="content">
							<el-input v-model="addForm.content" type="textarea" />
						</el-form-item>
						<el-form-item label="联系人" prop="contacts_name">
							<el-input v-model="addForm.contacts_name" />
						</el-form-item>
						<el-form-item label="手机号" prop="phone">
							<el-input v-model="addForm.phone" />
						</el-form-item>
						<el-form-item label="固定电话" prop="telphone">
							<el-input v-model="addForm.telphone" />
						</el-form-item>
						<el-form-item label="微信" prop="wechat">
							<el-input v-model="addForm.wechat" />
						</el-form-item>
						<el-form-item label="邮箱" prop="email">
							<el-input v-model="addForm.email" />
						</el-form-item>
						<el-form-item label="QQ" prop="qq">
							<el-input v-model="addForm.qq" />
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="状态">
							<el-select v-model="addForm.status">
								<el-option label="未处理" :value="1" />
								<el-option label="已跟进" :value="2" />
							</el-select>
						</el-form-item>
						<el-form-item label="需求说明" prop="explain">
							<el-input v-model="addForm.explain" type="textarea" />
						</el-form-item>
						<el-form-item label="预算金额" prop="expect_amount">
							<el-input v-model="addForm.expect_amount" />
						</el-form-item>
						<el-form-item label="客户名称" prop="company_name">
							<el-input v-model="addForm.company_name" />
						</el-form-item>
						<el-form-item label="公司地址" prop="company_address">
							<el-input v-model="addForm.company_address" />
						</el-form-item>
						<el-form-item label="企业网址" prop="company_site">
							<el-input v-model="addForm.company_site" />
						</el-form-item>
						<el-form-item label="询盘来源" prop="referer">
							<el-input v-model="addForm.referer" />
						</el-form-item>
						<el-form-item label="来源网址" prop="referer_web">
							<el-input v-model="addForm.referer_web" />
						</el-form-item>
					</el-col>
				</el-row>
				<div class="btn">
					<el-button @click="dialogShow = false">取 消</el-button>
					<el-button type="primary" @click="submit()">确 定</el-button>
				</div>
			</el-form>
		</BouncedDialog>
		<el-table
			:data="orderData"
			border
			stripe
			:header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }"
		>
			<el-table-column label="ID" prop="id" width="60px" />
			<el-table-column label="联系人" prop="contacts_name" show-overflow-tooltip />
			<el-table-column label="内容" prop="content" show-overflow-tooltip />
			<el-table-column label="手机号" prop="phone" show-overflow-tooltip />
			<el-table-column label="状态" prop="status">
				<template slot-scope="scope">
					<!-- <el-switch
            v-model="scope.row.status"
            :active-value="1"
            :inactive-value="2"
            active-text="正常"
            inactive-text="禁用"
            @change="disableUser(scope.row)"
          /> -->
					<span v-if="scope.row.status == 1">未处理</span>
					<span v-if="scope.row.status == 2">已跟进</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="客户名称" prop="company_name" show-overflow-tooltip />
      <el-table-column label="公司地址" prop="company_address" show-overflow-tooltip />
      <el-table-column label="微信" prop="wechat" show-overflow-tooltip />
      <el-table-column label="邮箱" prop="email" show-overflow-tooltip />
      <el-table-column label="QQ" prop="qq" show-overflow-tooltip />
      <el-table-column label="企业网址" prop="company_site" show-overflow-tooltip />
      <el-table-column label="询盘来源" prop="referer" show-overflow-tooltip />
      <el-table-column label="来源网址" prop="referer_web" show-overflow-tooltip />
      <el-table-column label="预算金额" prop="expect_amount" show-overflow-tooltip />
      <el-table-column label="需求说明" prop="explain" show-overflow-tooltip />
      <el-table-column label="固定电话" prop="telphone" show-overflow-tooltip /> -->
			<el-table-column label="操作" width="180px" fixed="right">
				<template slot-scope="scope">
					<!-- <el-button type="text" @click="check(scope.row)">查看模型字段</el-button> -->
					<el-button class="edit" size="mini" @click="editor(scope.row)">编辑</el-button>
					<el-button class="dele" size="mini" @click="del(scope.row)">放入回收站</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			:current-page="page.currentPage"
			:page-sizes="page.pageSizes"
			:page-size="page.size"
			layout="total, sizes, prev, pager, next, jumper"
			:total="page.total"
			:hide-on-single-page="page.total < page.size ? true : false"
			@size-change="handleSizeChange"
			@current-change="handleCurrentChange"
		/>
	</div>
</template>
<script>
import inquiryApi from '@/api/inquiry.js'
export default {
	data() {
		return {
			orderData: [], //
			dialogShow: false,
			addForm: {
				website_id: '',
				inquiry_type: '',
				contacts_name: '',
				content: '',
				wechat: '',
				email: '',
				telphone: '',
				phone: '',
				qq: '',
				id: '',
				status: '',
				company_name: '',
				company_address: '',
				company_site: '',
				referer: '',
				referer_web: '',
				expect_amount: '',
				explain: '',
			},
			rules: {
				content: [{ required: 'true', message: '请输入询盘内容', trigger: 'blur' }],
				inquiry_type: [{ required: 'true', message: '选择询盘分类', trigger: 'blur' }],
			},
			searchForm: {
				title: '',
			},
			page: {
				total: 0,
				currentPage: 1,
				size: 10,
				pageSizes: [10, 20, 30, 40],
			}, // 分页器
			val: {},
			id: '',
			siteId: '',
			inquiryCate: '', // 询盘分类
		}
	},
	computed: {
		siteId1() {
			return this.$store.getters.siteId
		},
	},
	watch: {
		siteId1(val, value) {
			this.siteId = this.$store.getters.siteId
			this.addForm.website_id = val
			this.getList()
		},
	},
	created() {
		this.$nextTick(() => {
			this.getList()
		})
		this.getCateList()
	},
	mounted() {
		// this.getTikets()
	},
	updated() {},
	methods: {
		// disableUser(row) {
		//   const val = {
		//     website_id: this.$store.getters.siteId,
		//     inquiry_category_id: row.inquiry_category_id,
		//     contact_name: row.contact_name,
		//     content: row.content,
		//     wechat: row.wechat,
		//     email: row.email,
		//     mobile: row.mobile,
		//     qq: row.qq,
		//     id: row.id,
		//     status: ''
		//   }
		//   if (row.status == 1) {
		//     val.status = 1
		//   } else {
		//     val.status = 2
		//   }
		//   inquiryApi.inquiryUpdate(val).then(res => {
		//     if (res.code == 0) {
		//       this.$message.success(res.msg)
		//     } else {
		//       this.$message.error(res.msg)
		//     }
		//   })
		// },
		// 询盘分类列表
		getCateList() {
			// this.val.page = this.page.currentPage
			// this.val.limit = this.page.size
			// this.val.title = this.searchForm.title
			inquiryApi.inquiryCategoryList(this.val).then((res) => {
				this.inquiryCate = res.data
			})
		},
		// 新增
		goAdd() {
			this.addForm = {
				website_id: this.$store.getters.siteId,
				inquiry_type: 1,
				contacts_name: '',
				content: '',
				wechat: '',
				email: '',
				telphone: '',
				phone: '',
				qq: '',
				id: '',
				status: 2,
				company_name: '',
				company_address: '',
				company_site: '',
				referer: '',
				referer_web: '',
				expect_amount: '',
				explain: '',
			}

			this.dialogShow = true
		},
		// 编辑
		editor(row) {
			// return
			// this.id = row.id
			this.addForm = {
				website_id: row.website_id,
				inquiry_type: row.inquiry_type * 1,
				contacts_name: row.contacts_name,
				content: row.content,
				wechat: row.wechat,
				email: row.email,
				telphone: row.telphone,
				phone: row.phone,
				qq: row.qq,
				status: row.status,
				company_name: row.company_name,
				company_address: row.company_address,
				company_site: row.company_site,
				referer: row.referer,
				referer_web: row.referer_web,
				expect_amount: row.expect_amount,
				explain: row.explain,
				id: row.id,
			}
			this.getInfo(row.id)
		},
		// 获取询盘详情
		getInfo(val) {
			inquiryApi.inquiryInfo({ id: val }).then((res) => {
				// this.addForm = res.data
				this.dialogShow = true
			})
		},
		submit() {
			this.$refs.addForm.validate((valid) => {
				if (valid) {
					this.addForm.website_id = this.$store.getters.siteId
					if (!this.addForm.id) {
						inquiryApi.inquirySave({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					} else {
						inquiryApi.inquiryUpdate({ ...this.addForm }).then((res) => {
							if (res.code == 0) {
								this.$message.success(res.msg)
								this.dialogShow = false
								this.getList()
							} else {
								this.$message.error(res.msg)
							}
						})
					}
				} else {
					this.$message.error('请填写必要信息')
				}
			})
		},

		// 查看模型字段列表
		// check(row) {
		//   this.$router.push({ name: 'modelField', query: { id: row.id }})
		// },
		// 删除
		del(row) {
			this.$confirm('此操作将该询盘信息放入回收站, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			})
				.then(() => {
					inquiryApi.inquiryDelete({ id: row.id }).then((res) => {
						if (res.code == 0) {
							this.$message.success(res.msg)
							this.getList()
						} else {
							this.$message.error(res.msg)
						}
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消',
					})
				})
		},
		// 询盘列表
		getList() {
			this.val.page = this.page.currentPage
			this.val.limit = this.page.size
			this.val.website_id = this.$store.getters.siteId
			// this.val.title = this.searchForm.title
			if (this.val.website_id) {
				inquiryApi.inquiryList(this.val).then((res) => {
					if (res.code == 0) {
						this.orderData = res.data
						this.page.total = res.count
					} else {
						this.$message.error(res.msg)
					}
				})
			}
		},
		// 分页规格改变
		handleSizeChange(val) {
			this.page.size = val
			this.page.currentPage = 1
			this.getList()
		},
		// 分页点击
		handleCurrentChange(val) {
			this.page.currentPage = val
			this.getList()
		},
	},
}
</script>
<style lang="scss">
#order {
	.link {
		.el-select {
			width: 100%;
		}
		.el-dialog__body {
			padding-top: 10px;
		}
	}
	.addForm .el-form-item__content {
		width: calc(100% - 120px);
	}
	.addForm .el-form-item {
		margin-bottom: 20px;
	}
}
</style>
<style scoped lang="scss">
.el-table {
	margin-bottom: 20px;
}
.search {
	min-width: 1350px;
	background-color: #fff;
	padding: 35px 30px 20px;
	border-radius: 5px;
}
.el-form-item {
	width: 100%;
	margin-bottom: 0px;
}
.btn {
	margin-top: 20px;
}
</style>
